<template>
  <div class="box">

    <van-nav-bar
      title="智慧商城"
      class="nav-bar"
    />

    <van-search v-model="value" />

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" >
      <van-swipe-item v-for="(item,index) in imgList" :key="index"><img class="img" :src="item.imgUrl" alt=""></van-swipe-item>
    </van-swipe>

    <van-notice-bar
      left-icon="volume-o"
      :text="this.text"
      scrollable
      color='red'
      background='#47acc5'
    />

    <van-grid :column-num="5">
      <van-grid-item @click="details" v-for="(item,value) in list" :key="value" :icon="item.imgUrl" :text="item.text" />
    </van-grid>

    <div>
      <img style="width:100%" v-for="(item,index) in image" :key="index" :src="item.imgUrl" alt="">
    </div>

    <div v-html="richText"></div>

    <van-card
      @click="details"
      v-for="(item,index) in goodsList"
      :key="index"
      :price="item.goods_price_min"
      :desc="`已售${item.goods_sales}件`"
      :title="item.goods_name"
      :thumb="item.goods_image"
    />

  </div>
</template>

<script>
import { render } from '@/api/user'
import router from '@/router'
export default {
  name: 'HomeView',
  data () {
    return {
      value: '',
      imgList: [],
      text: '',
      list: [],
      image: [],
      richText: '',
      goodsList: []
    }
  },
  created () {
    this.render()
  },
  methods: {
    async render () {
      const res = await render()
      console.log(res)
      this.imgList = res.data.pageData.items[1].data
      this.text = res.data.pageData.items[2].params.text
      this.list = res.data.pageData.items[3].data
      this.image = res.data.pageData.items[4].data
      this.richText = res.data.pageData.items[5].params.content
      this.goodsList = res.data.pageData.items[6].data
    },
    details () {
      router.push('/details')
    }
  }
}
</script>

<style scoped>
.box {
  margin-bottom: 60px;
}
.nav-bar{
  background-color: red;
}
::v-deep .van-nav-bar__title{
    color:#fff;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    height: 200px;
  }
.img{
  height: 200px;
}
</style>
